<script lang="ts" setup>
import type { XuanXiaoAlbum, XuanXiaoAlbumImage } from '@/api/designer/model'
import type { Album01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderAlbum01.less'

type RenderedItem = Pick<XuanXiaoAlbum, 'name'> & XuanXiaoAlbumImage & { key: number }
defineOptions({
  name: 'RenderAlbum01',
})
const props = defineProps<{
  render: Album01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
const renderedItems = computed<RenderedItem[]>(() => {
  const result: RenderedItem[] = []
  let key = 0
  props.render.config.albums!.forEach((l) => {
    if (l.images && l.images.length > 0) {
      l.images.forEach((i) => {
        result.push({
          desc: i.desc,
          name: l.name,
          pic: i.pic,
          key: key++,
        })
      })
    }
  })
  return result
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <div :class="prefix('content')">
        <!-- 上部分 -->
        <div :class="prefix('preview-wrap')">
          <!-- item for loop -->
          <div v-for="(item, index) in renderedItems" :key="item.key" :class="[prefix('preview'), index === 0 ? prefix('preview-active') : '', `${render.id}-${item.key}`]" :style="{ backgroundImage: `url(${item.pic})` }">
            <div v-if="(render.config.isShowTitle && item.name) || (render.config.isShowSubTitle && item.desc)" :class="prefix('info')">
              <div v-if="render.config.isShowTitle && item.name" :class="prefix('title')">
                {{ item.name }}
              </div>
              <div v-if="render.config.isShowSubTitle && item.desc" :class="prefix('subtitle')">
                {{ item.desc }}
              </div>
            </div>
          </div>
        </div>
        <!-- 下部分 -->
        <div :class="prefix('list')">
          <!-- item for loop -->
          <div v-for="(item, index) in renderedItems" :key="item.key" :class="[prefix('item'), index === 0 ? prefix('item-active') : '']" :data-album="`${render.id}-${item.key}`">
            <img :src="item.pic" :class="prefix('img')">
            <!-- 黑透 -->
            <div v-if="platform === 'pc'" :class="prefix('item-mask')">
              <div :class="prefix('item-mask-desc')">
                {{ item.desc }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <a v-if="platform === 'pc' && render.config.buttonUrl" :class="prefix('btn')" target="_blank" :href="render.config.buttonUrl">{{ render.config.buttonText }}</a>
    </div>
  </div>
</template>
